import { useEffect } from "react";

export default function useClickOutside(ref: React.RefObject<HTMLElement | null>, handle: Function) {
    useEffect(() => {

        const listener = (event: MouseEvent) => {
            if (!ref.current || ref.current.contains(event.target as HTMLElement)) {
                return;
            }
            handle(event);
        }

        window.addEventListener('click', listener);

        return () => {
            window.removeEventListener('click', listener);
        }
    }, [ref, handle])
}